<template>
	<div>
		<ProTable v-if="selectData" ref="proTable" title="年份酒库存数据" :columns="columns" :request-api="getTableList" :init-param="initParam">
			<template #searchHeader>
				<div class="mb20">数据截止{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
			</template>
			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>

			<!-- 表格 功能 按钮 -->
			<template #otherButton>
				<el-button @click="onExport" v-auth="'data:inventory:export'"> 导出 </el-button>
			</template>
		</ProTable>
		<DataModal :visible="dataVisible" :row="dataRow" @handleClose="closeData" />
	</div>
</template>

<script setup lang="tsx" name="dataInventory">
import { onMounted, ref, reactive, computed, onBeforeMount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import { NextLoading } from '/@/utils/loading';
import ProTable from '../../../../components/ProTable/index.vue';
import { ProTableInstance, ColumnProps } from '../../../../components/ProTable/interface';
import { fetchNfjCategory, fetchNfjInventory, fetchNfjInventoryExport, fetcDataEnums } from '/@/api/data';
import DataModal from './dialog/data.vue';
import { useDownload } from '/@/hooks/useDownload';
import { fenToYuan } from '/@/utils/commonFunction';

const router = useRouter();
const route = useRoute();

const dataVisible = ref<any>(false);
const dataRow = ref<any>();

const selectData = ref();

const handleParams = (params: any) => {
	let data = {
		...params,
	};
	if (data.modelValue) {
		data[data.searchType] = data.modelValue;
		delete data.searchType;
		delete data.modelValue;
	}
	return data;
};

// 保存并导出
const onExport = () => {
	ElMessageBox.confirm('确认导出数据?', '温馨提示', { type: 'warning' }).then(() =>
		useDownload(fetchNfjInventoryExport, '年份酒库存数据', handleParams(proTable.value?.searchParam))
	);
};

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	searchType: 'matCode',
});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	return fetchNfjInventory(handleParams(params));
};

const searchArr = [
	{
		label: '物料编码',
		value: 'matCode',
	},
	{
		label: '物料名称',
		value: 'matName',
	},
];

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'keywords',
		label: '物料搜索',
		isShow: false,
		search: {
			span: 2,
			render: (scope: any) => {
				const slot = {
					prepend: () => (
						<el-select
							v-model={scope.searchParam.searchType}
							placeholder="Select"
							style="width: 100px"
							onChange={(value: any) => {
								scope.searchParam.searchType = value;
							}}
						>
							{searchArr.map((item) => (
								<el-option key={item.value} label={item.label} value={item.value} />
							))}
						</el-select>
					),
				};
				return <el-input v-model={scope.modelValue} v-slots={slot} placeholder={getPlaceholder.value} maxlength={50}></el-input>;
			},
		},
	},
	{
		prop: 'matCode',
		label: '物料编码',
		minWidth: 120,
	},
	{
		prop: 'matName',
		label: '物料名称',
		minWidth: 200,
	},
	{
		prop: 'prodSaleLClassName',
		label: '产品大类',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择产品大类', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.prodSaleLClassName?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.prodSaleLClassName;
		},
	},
	{
		prop: 'prodSaleMClassName',
		label: '产品中类',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择产品中类', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.prodSaleMClassName?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.prodSaleMClassName;
		},
	},
	{
		prop: 'prodSaleSClassName',
		label: '产品小类',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择产品小类', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.prodSaleSClassName?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.prodSaleSClassName;
		},
	},
	{
		prop: 'core',
		label: '核心大单品',
		minWidth: 160,
		headerRender: () => {
			return <span>是否核心大单品</span>;
		},
		search: { el: 'select', props: { placeholder: '请选择是否核心大单品', clearable: true, filterable: true } },
		enum: [
			{
				label: '是',
				value: 1,
			},
			{
				label: '否',
				value: 0,
			},
		],
		render: (scope: any) => {
			return scope.row.productionGuaranteeMode;
		},
	},
	{
		prop: 'inventoryType',
		label: '仓库类型',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择仓库类型', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.inventoryType?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.inventoryType;
		},
	},
	{
		prop: 'inventoryId',
		minWidth: 120,
		label: '仓库代码',
	},
	{
		prop: 'inventoryName',
		minWidth: 200,
		label: '仓库名称',
		search: { el: 'select', props: { placeholder: '请选择仓库名称', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.inventoryName?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.inventoryName;
		},
	},
	{
		prop: 'inventoryArea',
		label: '仓库分布',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择仓库分布', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.inventoryArea?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.inventoryArea;
		},
	},
	{
		prop: 'inventoryProvider',
		label: '仓储商',
		minWidth: 200,
		search: { el: 'select', props: { placeholder: '请选择仓储商', clearable: true, filterable: true } },
		enum: () => {
			return new Promise<any>((resolve) => {
				const arr = selectData.value?.inventoryProvider?.map((v: any, i: any) => ({ label: v, value: v }));
				resolve({
					code: 200,
					msg: 'success',
					data: arr,
				});
			});
		},
		render: (scope: any) => {
			return scope.row.inventoryProvider;
		},
	},
	{
		prop: 'totalInventoryQty',
		label: '在库总库存数量',
		minWidth: 160,
	},
	{
		prop: 'unrestrictedInventoryQty',
		label: '非限制性库存数量',
		minWidth: 160,
	},
	{
		prop: 'frozenInventoryQty',
		label: '冻结库存数量',
		minWidth: 160,
	},
	{
		prop: 'price',
		label: '在库总价值',
		minWidth: 160,
		render: (scope) => {
			return fenToYuan(scope.row.price);
		},
	},
	{
		prop: 'productionYear',
		label: '生产年份',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择生产年份' } },
		enum: () => {
			return new Promise<any>((resolve) => {
				fetcDataEnums('product').then((res: any) => {
					resolve({
						code: 200,
						msg: 'success',
						data: res.data.map((v: any) => ({ label: v, value: v })),
					});
				});
			});
		},
		render: (scope) => {
			return scope.row.productionYear;
		},
	},
	{
		prop: 'pingchu',
		label: '瓶储年份',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '请选择瓶储年份' } },
		enum: () => {
			return new Promise<any>((resolve) => {
				fetcDataEnums('store').then((res: any) => {
					resolve({
						code: 200,
						msg: 'success',
						data: res.data.map((v: any) => ({ label: v, value: v })),
					});
				});
			});
		},
		render: (scope) => {
			return scope.row.pingchu;
		},
	},
	{
		prop: 'value',
		minWidth: 180,
		label: '生产批次数据',
		render: (scope) => {
			return (
				<el-button type="primary" link onClick={() => viewData(scope.row)}>
					查看数据
				</el-button>
			);
		},
	},
];

const getPlaceholder = computed(() => {
	const target = searchArr.find((item) => {
		return item.value == proTable.value?.searchParam.searchType;
	});
	return target ? `输入${target?.label}搜索` : '';
});

const closeData = (add: boolean) => {
	dataVisible.value = false;
	dataRow.value = null;
	if (add) {
		proTable.value?.getTableList();
	}
};

const viewData = (row: any) => {
	dataRow.value = row;
	dataVisible.value = true;
};
const initData = async () => {
	const res = await fetchNfjCategory({});
	selectData.value = res.data;
};

onBeforeMount(async () => {
	await initData();
});

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style lang="scss">
.demo-tabs {
	.el-tabs__header {
		margin-bottom: 0;
	}
}
</style>
